<template lang="pug">
.head_main
    .head_main_box.page-w.m-auto
        .logo
            img(src='./images/gjlogo.png')
            img(src='./images/zgyxlogo.png' style="width: 260px")
            span 临床试验机构评价信息平台                
        .box-user-info
            .dropdown-boxs(v-if="!userInfo.nickname")
                a(href='javascript:void(0);')
                    dl.user-info
                        dt
                            img(src="./images/userimg.png")
                        dd
                            span.name 
                                a(href="ctep-admin/#/login") 登录
                                | /
                                a(href="ctep-admin/#/register") 注册
                            .user-arrow.yd-icon-arrow-bottom
            el-dropdown.dropdown-boxs(:hide-on-click="false" v-else)
                a(href='javascript:void(0);')
                    dl.user-info
                        dt
                            img(src="./images/userimg.png")
                        dd
                            span.name {{ userInfo.nickname }}
                template
                    el-dropdown-menu(slot="dropdown" )
                        el-dropdown-item(@click.native="logout" v-if="userInfo.nickname")
                            | 退出
</template>
<script>
export default {
    data () {
        return {
        };
    },
    computed: {
        userInfo() {
            return this.$store.state.global.userInfo;
        }
    },
    methods: {
        logout() {
            window.localStorage.removeItem('ACCESS_TOKEN');
            window.location.reload();
        }
    }
};
</script>
<style>
.el-popper{
    min-width: 150px;
}
</style>
<style lang="sass" scoped>
.head_main
    border-top: 6px solid #004B43
    border-bottom: 2px solid #F0F1F2 
    

    
    .head_main_box
        padding: 13px 0
        display: flex
        .logo
            padding-left: 10px
            flex: 1
            img
                width: 280px
                padding-right: 10px
            span
                font-size: 30px
                // font-size: 25px
                font-family: HiraginoSansGB-W6, HiraginoSansGB
                font-weight: 600
                color: #004B43
                position: relative
                top: 4px
        .dropdown-boxs
            position: relative
            top: 8px
        .box-user-info
            width: 120px
            overflow: hidden
            text-align: right
        a
            color: #313A46
        .user-info
            width: 140px
            padding-top: 14px
            align-items: center
            overflow: hidden
            font-size: 14px
            dt 
                width: 38px
                height: 38px
                position: relative
                top: -6px
                img 
                    width: 100%
            dt,dd
                float: left
                text-align: center
            dd
                position: relative
                padding-left: 10px
                margin-top: 4px
                .user-arrow
                    position: absolute
                    top: 4px
                .name
                    font-size: 14px
                    font-family: PingFangSC-Regular, PingFang SC
                    font-weight: 400
                    padding-right: 5px
                    width: 70px
                    white-space: nowrap
                    overflow: hidden
                    text-overflow: ellipsis
                    display: inline-block
                    color: #313A46
        
</style>